<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="./../template/common.xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:p="http://primefaces.org/ui"
    xmlns:t="http://myfaces.apache.org/tomahawk">

    <ui:define name="title">
        Event-Create
    </ui:define>
    <ui:define name="head">
         <script src="../../res/js/jquery-1.10.2.min.js"></script>
        <script src="../../res/js/jquery-ui-1.10.0.custom.js"></script>
        <link rel="stylesheet" href="../../res/css/jquery-ui.css" />
        <script type="text/javascript" src="../../ckeditor/ckeditor.js"></script>
        <script type="text/javascript">
            $(function() {
                $(".c1").datepicker({
                    dateFormat: 'dd-mm-yy',
                    changeMonth: true,
                    changeYear: true
                });
            });
        </script>
 <script>
            $(function() {
                $(document).tooltip();
            });
        </script>
        <style>
            label {
                display: inline-block;
                width: 100px;
            }
        </style>
          <link rel="stylesheet" href="../../res/css/admin-style.css"/>
    </ui:define>
    <ui:define name="pageheader">
        Event create
    </ui:define>

    <ui:define name="content">
        <table border="0" width="100%" cellpadding="0" cellspacing="0" id="content-table">
            <tr>
                <th rowspan="3" class="sized"><img src="images/shared/side_shadowleft.jpg" width="20" height="300" alt="" /></th>
                <th class="topleft"></th>
                <td id="tbl-border-top">&nbsp;</td>
                <th class="topright"></th>
                <th rowspan="3" class="sized"><img src="images/shared/side_shadowright.jpg" width="20" height="300" alt="" /></th>
            </tr>
            <tr>
                <td id="tbl-border-left"></td>
                <td>
                    <!--  start content-table-inner -->
                    <div id="content-table-inner">

                        <table border="0" width="100%" cellpadding="0" cellspacing="0">
                            <tr valign="top">
                                <td>
                                    <div id="step-holder">
                                        <div class="step-no">1</div>
                                        <div class="step-dark-left"><a href="">Add event details</a></div>
                                        <div class="step-dark-right">&nbsp;</div>

                                        <div class="step-no-off">2</div>
                                        <div class="step-light-left">Confirm</div>
                                        <div class="step-light-round">&nbsp;</div>
                                        <div class="clear"></div>
                                    </div>
                                    <!--  end step-holder -->

                                    <!-- start id-form -->
                                    <h:form id="form" >
                                        <table border="0" cellpadding="0" cellspacing="0"  id="id-form">
                                            <tr>
                                                <th valign="top">Name:</th>
                                                <!--<td><input type="text" class="inp-form-error" /></td>-->
                                                <td>
                                                    <h:inputText required="true" value="#{eventManager.title}" styleClass="inp-form" alt="&lt;Event's title here&gt;"/>
                                                </td>
                                            </tr>
                                            <tr>
                                                <th valign="top">Start date</th>
                                                <!--<td><input type="text" class="inp-form-error" /></td>-->
                                                <td>
                                                    <h:inputText  id="dpBirth" value="#{eventManager.startDate}"  styleClass="inp-form c1" alt="&lt;Start Date here&gt;" >
                                                        <f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="GMT+7"/>

                                                    </h:inputText>
                                                    <!--<t:inputCalendar />-->
                                                </td>

                                            </tr>
                                            <tr>
                                                <th valign="top">End date</th>
                                                <td>
                                                    <h:inputText   value="#{eventManager.endDate}" styleClass="inp-form c1" alt="&lt;End Date here&gt;">
                                                        <f:convertDateTime type="date" pattern="dd-MM-yyyy" timeZone="GMT+7"/>
                                                    </h:inputText>
                                                </td>

                                            </tr>
                                            <tr>
                                                <th valign="top">Content</th>
                                                <td>
                                                    <h:inputTextarea id="textarea"  class="editor" value="#{eventManager.content}"/>
                                                    <script type="text/javascript">
                                                        //<![CDATA[
                                                        CKEDITOR.replace('form:textarea');
                                                        //]]>
                                                    </script>
                                                </td>

                                            </tr>
                                            <tr>
                                                <th>&nbsp;</th>
                                                <td valign="top">
                                                    <h:commandButton  value="Create" action="#{eventManager.docreate}" class="buttons" />
                                                </td>
                                                <td></td>
                                            </tr>

                                        </table>

                                    </h:form>

                                </td>
                            </tr>
                        </table>
                    </div>
                </td>
            </tr>
        </table>
    </ui:define>

</ui:composition>
